<template>
  <view class="module-pic-scroll">
    <scroll-view scroll-x="true" :scroll-into-view="intoViewId" :show-scrollbar="false" scroll-with-animation>
      <view v-for="(item, index) in moduleData.content_list" :key="index" :style="'display: inline-block; position: relative; width: '+(100/(moduleData.show_num-0.5))+'%'" @click="handleClick(item)">
        <view v-if="item.type===78 && item.type_val" :style="'height: 0;padding-bottom: 100%; position: relative;background: url('+item.pic+');'">
          <video :src="item.type_val" />
        </view>
        <b-image v-else :src="item.pic" mode="widthFix" />
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  name: 'PicScroll',
  props: {
    moduleData: {
      type: Object,
      default() {
        return {
          show_num: 1,
          content_list: []
        }
      }
    }
  },
  data() {
    return {
      intoViewId: ''
    }
  },
  methods: {
    handleClick(item) {
      this.$emit('itemClick', item)
    }
  }
}
</script>
<style lang="scss">
.module-pic-scroll{
  font-size: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;

  image{
    height: auto;
    display: block;
  }
  video{
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
  }
}
</style>
